<template>
  <el-dialog
    v-model="dialogVisible"
    :width="width"
    :close-on-click-modal="closeOnClickModal"
    :show-close="showClose"
    class="e-confirm-dialog"
    :append-to-body="true"
  >
    <div class="dialog-content">
      <div class="icon-wrapper" v-if="showIcon">
        <Icon :icon="iconClass" />
      </div>
      <div class="content-wrapper">
        <div class="title" v-if="title">{{ title }}</div>
        <div class="content" v-html="content"></div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <e-button v-if="cancelButtonVisible" :type="cancelButtonType" @click="handleCancel">{{
          cancelButtonText
        }}</e-button>
        <e-button v-if="confirmButtonVisible" :type="confirmButtonType" @click="handleConfirm">{{
          confirmButtonText
        }}</e-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import { Warning } from '@element-plus/icons-vue'
  import { EButton } from '@/components/eButton'
  import { Icon } from '@/components/Icon'
  import { ElDialog } from 'element-plus'
  const props = defineProps({
    // 对话框标题
    title: {
      type: String,
      default: ''
    },
    // 对话框内容
    content: {
      type: String,
      default: ''
    },
    // 对话框宽度
    width: {
      type: String,
      default: '440px'
    },
    // 是否显示图标
    showIcon: {
      type: Boolean,
      default: true
    },
    // 图标类名
    iconClass: {
      type: String,
      default: 'Warning'
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: false
    },
    // 点击蒙层是否关闭
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    // 取消按钮是否可见
    cancelButtonVisible: {
      type: Boolean,
      default: true
    },
    // 取消按钮文字
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    // 取消按钮类型
    cancelButtonType: {
      type: String,
      default: 'default'
    },
    // 确认按钮是否可见
    confirmButtonVisible: {
      type: Boolean,
      default: true
    },
    // 确认按钮文字
    confirmButtonText: {
      type: String,
      default: '确认'
    },
    // 确认按钮类型
    confirmButtonType: {
      type: String,
      default: 'primary'
    }
  })

  const dialogVisible = ref(false)
  const emit = defineEmits(['confirm', 'cancel', 'close'])

  // 打开对话框
  const show = () => {
    dialogVisible.value = true
  }

  // 关闭对话框
  const close = () => {
    dialogVisible.value = false
    emit('close')
  }

  // 取消按钮点击事件
  const handleCancel = () => {
    close()
    emit('cancel')
  }

  // 确认按钮点击事件
  const handleConfirm = () => {
    close()
    emit('confirm')
  }

  defineExpose({
    show,
    close
  })
</script>

<style lang="scss" scoped>
  .e-confirm-dialog {
    :deep(.el-dialog__header) {
      padding: 0;
      margin: 0;
    }

    :deep(.el-dialog__body) {
      padding: 24px;
    }

    .dialog-content {
      display: flex;
      align-items: flex-start;

      .icon-wrapper {
        margin-right: 16px;

        i,
        .el-icon {
          font-size: 24px;
          color: #f56c6c;
        }
      }

      .content-wrapper {
        flex: 1;

        .title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;
        }

        .content {
          font-size: 14px;
          color: #606266;
          line-height: 1.6;
        }
      }
    }

    .dialog-footer {
      text-align: right;
      margin-top: 16px;
    }
  }
</style>
